<template>
  <div
    class="pos-fixed top-0 z-666 select-none w-100% h-70px bg-#fff dark:bg-#3A3A3A text-#000 dark:text-#D8D8D8 border-1px border-solid border-#f2f1f1 dark:border-#000"
  >
    <!-- 头部 -->
    <div class="m-0 m-auto max-w-1190px p-x-20px p-y-10px flex flex-justify-center flex-items-center">
      <div class="w-100% h-50px flex flex-items-center flex-justify-between">
        <!-- 左 Logo End -->
        <div class="h-100% flex flex-items-center">
          <el-image :src="logoUrl" fit="contain" class="w-155px h-45px" @click="handleHomePage">
            <template #error>
              <el-image
                src="https://pic4.zhimg.com/v2-702a23ebb518199355099df77a3cfe07_b.webp"
                fit="cover"
                class="w-155px h-45px"
              ></el-image>
            </template>
          </el-image>
        </div>
        <!-- 左 Logo End -->
        <!-- 中 菜单 Begin -->
        <KoiPCMenu></KoiPCMenu>
        <!-- 中 菜单 End -->
        <!-- 右 图标 Begin-->
        <div class="flex flex-items-center">
          <!-- 个人信息 -->
          <KoiMine></KoiMine>
          <!-- 搜索文章 -->
          <KoiSearch></KoiSearch>
          <span class="text-[rgba(50,50,50,0.5)] m-t-2px m-x-10px dark:text-#8D8D8D"> | </span>
          <!-- 明亮/暗黑模式 -->
          <KoiDark></KoiDark>
          <!-- 右 图标 End-->
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import KoiPCMenu from "./components/PCMenu.vue";
import KoiDark from "./components/Dark.vue";
import KoiSearch from "./components/Search.vue";
import KoiMine from "./components/Mine.vue";
import { useRouter } from "vue-router";
import { HOME_URL } from "@/config/index.ts";
import logoUrl from "@/assets/images/logo/logo.png";

const router = useRouter();

const handleHomePage = () => {
  router.push({ path: HOME_URL });
};
</script>

<style lang="scss" scoped></style>
